<template>
  <div>
    <!-- banner -->
    <div class="home-banner" :style="cover">
      <div class="banner-container">
        <!-- 联系方式 -->
        <h1 class="blog-title animated zoomIn">
          {{ blogInfo.webSite.name }}
        </h1>
        <!-- 一言 -->
        <div class="blog-intro">
          {{ blogInfo.webSite.summary }} <span class="typed-cursor">|</span>
        </div>
        <!-- 联系方式 -->
        <div class="blog-contact">
          <a v-if="isShowSocial(2)" class="mr-5 iconfont iconqq" target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin=' +
            blogInfo.webSite.qqNumber +
            '&site=qq&menu=yes'
            " />
          <a v-if="isShowSocial(3)" target="_blank" :href="blogInfo.webSite.github" class="mr-5 iconfont icongithub" />
          <a v-if="isShowSocial(4)" target="_blank" :href="blogInfo.webSite.gitee"
            class="iconfont icongitee-fill-round" />
        </div>
      </div>
      <!-- 向下滚动 -->
      <div class="scroll-down" @click="scrollDown">
        <v-icon color="#fff" class="scroll-down-effects">
          mdi-chevron-down
        </v-icon>
      </div>
    </div>
    <!-- 主页文章 -->
    <v-row class="home-container">
      <v-col md="9" cols="12">
        <v-card>
          <div style="display: flex;margin-top: 20px;padding: 1rem 1rem">
            <v-icon style="color: red">mdi-bell-outline</v-icon>
            <span style="margin-left: 10px">{{ blogInfo.webSite.bulletin }}</span>
          </div>
        </v-card>
        <v-card class="animated zoomIn article-card" style="border-radius: 12px 8px 8px 12px"
          v-for="(item, index) of articleList" :key="item.id">
          <!-- 文章封面图 -->
          <div :class="isRight(index)">
            <router-link :to="'/articles/' + item.id">
              <v-img class="on-hover" width="100%" height="100%" :src="item.avatar" />
            </router-link>
          </div>
          <!-- 文章信息 -->
          <div class="article-wrapper">
            <div style="line-height:1.4">
              <div>
                <router-link :to="'/articles/' + item.id">
                  {{ item.title }}
                </router-link>
                <span v-if="item.quantity >= 1000 && item.quantity < 10000"
                  style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center">
                  <font style="color: #f70;">千次阅读</font>
                </span>
                <span v-if="item.quantity >= 10000"
                  style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center">
                  <font style="color: #f70;">万次阅读</font>
                </span>
              </div>
            </div>
            <div class="article-info">
              <!-- 是否置顶 -->
              <span v-if="item.isStick === 1">
                <span style="color:#ff7242">
                  <i class="iconfont iconzhiding" /> 置顶
                </span>
                <span class="separator">|</span>
              </span>
              <!-- 发表时间 -->
              <v-icon size="14">mdi-calendar-month-outline</v-icon>
              {{ item.createTime | date }}
              <span class="separator">|</span>
              <!-- 文章分类 -->
              <router-link :to="'/categories/' + item.categoryId">
                <v-icon size="14">mdi-inbox-full</v-icon>
                {{ item.categoryName }}
              </router-link>
              <span class="separator">|</span>
              <!-- 文章标签 -->
              <router-link style="display:inline-block" :to="'/tags/' + tag.id" class="mr-1"
                v-for="tag of item.tagDTOList" :key="tag.id">
                <v-icon size="14">mdi-tag-multiple</v-icon>
                {{ tag.name }}
              </router-link>
            </div>
            <!-- 文章内容 -->
            <div class="article-content">
              {{ item.content }}
            </div>
          </div>
        </v-card>
        <!-- 无限加载 -->
        <infinite-loading @infinite="infiniteHandler">
          <div slot="no-more" />
        </infinite-loading>
      </v-col>
      <!-- 博主信息 -->
      <v-col md="3" cols="12" class="d-md-block d-none">
        <div class="blog-wrapper">
          <v-card class="animated zoomIn blog-card mt-5">
            <div class="author-wrapper">
              <!-- 博主头像 -->
              <v-avatar size="110">
                <img class="author-avatar" :src="blogInfo.webSite.authorAvatar" />
              </v-avatar>
              <div style="font-size: 1.375rem">
                {{ blogInfo.webSite.author }}
              </div>
              <div style="font-size: 0.875rem;">
                {{ blogInfo.webSite.authorInfo }}
              </div>
            </div>
            <!-- 博客信息 -->
            <div class="blog-info-wrapper">
              <div class="blog-info-data">
                <router-link to="/archives">
                  <div style="font-size: 0.875rem">文章</div>
                  <div style="font-size: 1.25rem">
                    {{ blogInfo.count.articleCount }}
                  </div>
                </router-link>
              </div>
              <div class="blog-info-data">
                <router-link to="/categories">
                  <div style="font-size: 0.875rem">分类</div>
                  <div style="font-size: 1.25rem">
                    {{ blogInfo.count.categoryCount }}
                  </div>
                </router-link>
              </div>
              <div class="blog-info-data">
                <router-link to="/tags">
                  <div style="font-size: 0.875rem">标签</div>
                  <div style="font-size: 1.25rem"> {{ blogInfo.count.tagCount }}</div>
                </router-link>
              </div>
            </div>
            <!-- 收藏按钮 -->
            <a class="collection-btn" @click="tip = true">
              <v-icon color="#fff" size="18" class="mr-1">mdi-bookmark</v-icon>
              加入书签
            </a>
          </v-card>
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5 big">
            <div class="web-info-title">
              <svg t="1683877635730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="9132" width="16" height="16">
                <path
                  d="M518.826667 588.8c-131.413333 0-238.933333-107.52-238.933334-238.933333s107.52-238.933333 238.933334-238.933334 238.933333 107.52 238.933333 238.933334-107.52 238.933333-238.933333 238.933333z m0-409.6c-93.866667 0-170.666667 76.8-170.666667 170.666667s76.8 170.666667 170.666667 170.666666 170.666667-76.8 170.666666-170.666666-76.8-170.666667-170.666666-170.666667z"
                  fill="#3793DF" p-id="9133"></path>
                <path
                  d="M112.64 913.066667h-6.826667c-18.773333-3.413333-30.72-22.186667-25.6-40.96 10.24-42.666667 25.6-85.333333 47.786667-122.88 80.213333-138.24 225.28-221.866667 384-221.866667 97.28 0 191.146667 32.426667 271.36 92.16 15.36 11.946667 18.773333 32.426667 6.826667 47.786667-11.946667 15.36-32.426667 18.773333-47.786667 6.826666-68.266667-51.2-146.773333-78.506667-230.4-78.506666-134.826667 0-257.706667 69.973333-325.973333 187.733333-18.773333 30.72-32.426667 66.56-40.96 102.4-1.706667 17.066667-17.066667 27.306667-32.426667 27.306667z"
                  fill="#3793DF" p-id="9134"></path>
                <path
                  d="M911.36 827.733333h-170.666667c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133333h170.666667c18.773333 0 34.133333 15.36 34.133333 34.133333s-15.36 34.133333-34.133333 34.133333z"
                  fill="#EB4AF4" p-id="9135"></path>
                <path
                  d="M826.026667 913.066667c-18.773333 0-34.133333-15.36-34.133334-34.133334v-170.666666c0-18.773333 15.36-34.133333 34.133334-34.133334s34.133333 15.36 34.133333 34.133334v170.666666c0 18.773333-15.36 34.133333-34.133333 34.133334z"
                  fill="#EB4AF4" p-id="9136"></path>
              </svg>
              关注我
            </div>
            <div class="guanzhu" id="follow-us" ref="follow">
              <!--              {{blogInfo.webSite.bulletin}}-->
              <ul>
                <!--                <li class="qqGroup">
                                  <a href="javascript:void(0);">{{ blogInfo.webSite.qqNumber}}</a>
                                </li>-->
                <li v-if="isShowSocial(2)" class="qq"><a
                    :href="'tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=' + blogInfo.webSite.qqNumber"
                    target="_blank">{{ blogInfo.webSite.qqNumber }}</a></li>
                <li v-if="isShowSocial(1)" class="email"><a href="javascript:void(0);">{{ blogInfo.webSite.email }}</a>
                </li>
                <li v-if="isShowSocial(3)" class="github"><a :href="blogInfo.webSite.github" target="_blank">{{
                  blogInfo.webSite.github }}</a></li>
                <li v-if="isShowSocial(4)" class="gitee"><a :href="blogInfo.webSite.gitee" target="_blank">{{
                  blogInfo.webSite.gitee }}</a></li>
              </ul>
            </div>
          </v-card>
          <v-card class="blog-card animated zoomIn mt-5">
            <div id="he-plugin-standard"></div>
          </v-card>
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5">
            <div class="web-info-title">
              <svg t="1683877542991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="7105" width="16" height="16">
                <path
                  d="M741.658197 70.618522C741.624512 70.618522 741.510198 970.8933 741.510198 970.8933 741.510198 967.484367 744.402062 960.328787 757.172574 955.341177 765.103987 952.243531 772.645392 953.032622 778.15685 955.73258 779.929322 956.60087 780.347896 956.945082 780.026811 956.581185L538.476226 682.823858C524.419874 666.893325 499.580126 666.893325 485.523774 682.823858L243.973189 956.581185C243.625181 956.975607 244.002266 956.664356 245.716407 955.815063 251.170364 953.112862 258.658982 952.274232 266.612622 955.317131 279.571439 960.274922 282.489802 967.49526 282.489802 970.8933L282.489802 70.729905C282.489802 70.66506 741.658197 70.618522 741.658197 70.618522ZM211.87128 970.8933C211.87128 1023.036375 262.443093 1042.384138 296.925623 1003.303936L538.476226 729.54659 485.523774 729.54659 727.074377 1003.303936C761.63909 1042.477283 812.12872 1022.758279 812.12872 970.8933L812.12872 70.729905C812.12872 31.552656 780.676537 0 741.658197 0L282.341803 0C243.451901 0 211.87128 31.745727 211.87128 70.729905L211.87128 970.8933Z"
                  fill="#389BFF" p-id="7106"></path>
              </svg>
              标签云
            </div>
            <div class="web-info">
              <svg :width="width" :height="height" @mousemove="listener($event)">
                <router-link v-for="(tag, index) in tags" :key="tag.text.id" :to="'/tags/' + tag.text.id">
                  <text :x="tag.x" :y="tag.y" :font-size="20 * (600 / (600 - tag.z))"
                    :fill-opacity="((400 + tag.z) / 600)" :fill="colors[index]">{{ tag.text.name }}
                  </text>
                </router-link>
              </svg>
            </div>
          </v-card>
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5">
            <div class="web-info-title">
              <svg t="1683876808906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5880" width="16" height="16">
                <path
                  d="M512 0a512 512 0 1 0 512 512 512.64 512.64 0 0 0-512-512zM109.696 512A399.488 399.488 0 0 1 128 393.088h102.4a633.6 633.6 0 0 0 0 237.888H128A399.488 399.488 0 0 1 109.696 512z m219.456 0a540.288 540.288 0 0 1 14.464-118.912h113.536v237.888H343.616A540.288 540.288 0 0 1 329.152 512z m237.696-354.816a519.424 519.424 0 0 1 78.4 126.144H566.848zM457.152 283.328H378.56a526.848 526.848 0 0 1 78.528-126.848z m0 457.28v126.144a519.424 519.424 0 0 1-78.4-126.144z m109.696 0h78.4a519.424 519.424 0 0 1-78.4 126.144z m0-109.696V393.088h113.536a495.552 495.552 0 0 1 0 237.888zM793.6 393.088H896a402.048 402.048 0 0 1 0 237.888h-102.4a633.6 633.6 0 0 0 0-237.888z m49.216-109.696h-78.848a675.52 675.52 0 0 0-59.072-124.224 404.224 404.224 0 0 1 137.664 124.16zM319.104 159.168a675.52 675.52 0 0 0-59.072 124.224H181.44a404.224 404.224 0 0 1 137.664-124.224z m-137.664 581.504h78.592a675.52 675.52 0 0 0 59.072 124.224 404.224 404.224 0 0 1-137.664-124.224z m523.392 124.224a675.52 675.52 0 0 0 59.072-124.224h78.528a404.224 404.224 0 0 1-137.536 124.16z"
                  fill="#1684F6" p-id="5881"></path>
              </svg>
              网站资讯
            </div>
            <div class="web-info">
              <div style="padding:4px 0 0">
                运行时间:<span class="float-right">{{ time }}</span>
              </div>
              <div style="padding:4px 0 0">
                总访问量:<span class="float-right">
                  {{ blogInfo.count.viewsCount }}
                </span>
              </div>
              <div style="padding:4px 0 0">
                当前在线人数:<span class="float-right">{{ onlineCount }}</span>
              </div>
            </div>
          </v-card>
        </div>
      </v-col>
    </v-row>
    <!-- 提示消息 -->
    <v-snackbar v-model="tip" top color="#49b1f5" :timeout="2000">
      按CTRL+D 键将本页加入书签
    </v-snackbar>
  </div>
</template>

<script>
import EasyTyper from "easy-typer-js";
import { fetchList, addFeedback, getTags } from "../../api";

export default {
  created() {
    this.init();
    this.timer = setInterval(this.runTime, 1000);
    this.changeColors();
    //初始化标签位置
    let tags = [];
    getTags().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        let tag = {};
        let k = -1 + (2 * (i + 1) - 1) / res.data.length;
        let a = Math.acos(k);
        let b = a * Math.sqrt(res.data.length * Math.PI);
        tag.text = res.data[i];
        tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);
        tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
        tag.z = this.RADIUS * Math.cos(a);
        tags.push(tag);
      }
    });
    console.log(tags)
    this.tags = tags;
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },
  beforeDestroy() {
    clearInterval(this.heartBeat);
  },
  mounted: function () {
    setInterval(() => {
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
    }, 17);
    window.WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": 230,
        "height": 300,
        "background": "2",
        "dataColor": "000000",
        "borderRadius": "5",
        "key": "4034255d0cc94897b5f745367ccb81f2"
      }
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  metaInfo: {
    meta: [{
      name: "keyWords",
      content: "拾壹博客,开源博客,www.shiyit.com"  //变量或字符串
    }, {
      name: "description",
      content: "一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流"
    }]
  },
  data: function () {
    return {
      width: 220,//svg宽度
      height: 230,//svg高度
      RADIUS: 100,//球的半径
      speedX: Math.PI / 360,//球一帧绕x轴旋转的角度
      speedY: Math.PI / 360,//球-帧绕y轴旋转的角度
      tags: [],
      colors: [],//存储颜色
      path: process.env.VUE_APP_WEBSOCKET_API,
      socket: "",
      onlineCount: 0,
      heartBeat: null,
      formLabelWidth: "80px",
      form: {
        type: 1,
        email: null,
        title: null,
        content: null,
        imgUrl: null
      },
      webSite: {},
      tip: false,
      totalPage: null,
      img: process.env.VUE_APP_IMG_API,
      time: "",
      obj: {
        output: "",
        isEnd: false,
        speed: 300,
        singleBack: false,
        sleep: 0,
        type: "rollback",
        backSpeed: 40,
        sentencePause: true
      },
      articleList: [],
      params: {
        pageNo: 1,
        pageSize: 7
      },
      rules: {
        type: [
          { required: true, message: "必填字段", trigger: "blur" }
        ],
        email: [
          { required: true, message: "必填字段", trigger: "blur" },
          { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: "填写正确的邮箱" }
        ],
        title: [
          { required: true, message: "必填字段", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    rotateX(angleX) {
      var cos = Math.cos(angleX);
      var sin = Math.sin(angleX);
      for (let tag of this.tags) {
        var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
        var z1 = tag.z * cos + (tag.y - this.CY) * sin;
        tag.y = y1;
        tag.z = z1;
      }
    },
    rotateY(angleY) {
      var cos = Math.cos(angleY);
      var sin = Math.sin(angleY);
      for (let tag of this.tags) {
        var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
        var z1 = tag.z * cos + (tag.x - this.CX) * sin;
        tag.x = x1;
        tag.z = z1;
      }
    },
    listener(event) {//响应鼠标移动
      var x = event.clientX - this.CX;
      var y = event.clientY - this.CY;
      this.speedX = x * 0.0001 > 0 ? Math.min(this.RADIUS * 0.00002, x * 0.0001) : Math.max(-this.RADIUS * 0.00002, x * 0.0001);
      this.speedY = y * 0.0001 > 0 ? Math.min(this.RADIUS * 0.00002, y * 0.0001) : Math.max(-this.RADIUS * 0.00002, y * 0.0001);
    },
    changeColors() { //随机变色
      for (var i = 0; i < 30; i++) {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        this.colors[i] = "rgb(" + r + "," + g + "," + b + ")";
      }
    },

    screenshot() {
      this.$toast({ type: "error", message: "敬请期待!" });
    },
    closeDialog() {
      this.form.type = 1;
      this.form.email = null;
      this.form.title = null;
      this.form.content = null;
      this.$store.commit("setDialogFormVisible");
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          addFeedback(this.form).then(res => {
            this.$toast({ type: "success", message: "提交反馈成功" });
            this.closeDialog();
          }).catch(err => {
            this.$toast({ type: "error", message: "提交反馈失败" });
          });
        } else {
          this.$toast({ type: "error", message: "存在必填字段未填" });
        }
      });
    },
    // 初始化
    init() {
      document.title = "拾壹博客";
      if (typeof (WebSocket) === "undefined") {
        console.error("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
      // 一言Api进行打字机循环输出效果
      /*  fetch("https://v1.hitokoto.cn?c=i")
          .then(res => {
            return res.json();
          })
          .then(({ hitokoto }) => {
            this.initTyped(hitokoto);
          });*/
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj;
      // eslint-disable-next-line no-unused-vars
      const typed = new EasyTyper(obj, input, fn, hooks);
    },
    scrollDown() {
      window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight
      });
    },
    runTime() {
      var timeold =
        new Date().getTime() -
        new Date(1627747200000).getTime();
      var msPerDay = 24 * 60 * 60 * 1000;
      var daysold = Math.floor(timeold / msPerDay);
      var str = "";
      var day = new Date();
      str += daysold + "天";
      str += day.getHours() + "时";
      str += day.getMinutes() + "分";
      str += day.getSeconds() + "秒";
      this.time = str;
    },
    infiniteHandler($state) {
      let md = require("markdown-it")();
      fetchList(this.params).then(res => {
        if (res.data.records.length) {
          // 去除markdown标签
          res.data.records.forEach(item => {
            if (item.contentMd != null) {
              item.content = md
                .render(item.contentMd)
                .replace(/<\/?[^>]*>/g, "")
                .replace(/[|]*\n/, "")
                .replace(/&npsp;/gi, "");
            }
            this.articleList.push(item);
          });
          this.params.pageNo++;
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    open: function () {
      // 发送心跳消息
      var that = this;
      that.heartBeat = setInterval(function () {
        that.send("ping");
      }, 30 * 1000);
    },
    error: function () {
      console.error("连接错误");
    },
    getMessage: function (event) {
      this.onlineCount = event.data;
    },
    send(message) {
      this.socket.send(message);
    },
    close: function () {
      console.log("socket已经关闭");
    }
  },
  computed: {
    CX() {
      return this.width / 2;
    },
    CY() {
      return this.height / 2;
    },
    isRight() {
      return function (index) {
        if (index % 2 === 0) {
          return "article-cover left-radius";
        }
        return "article-cover right-radius";
      };
    },
    blogInfo() {
      return this.$store.state.blogInfo;
    },
    isShowSocial() {
      return function (social) {
        return this.$store.state.blogInfo.webSite.showList.indexOf(social) != -1;
      };
    },
    cover() {
      var cover = "";
      this.$store.state.blogInfo.pageList.forEach(item => {
        if (item.pageLabel === "home") {
          cover = item.pageCover;
        }
      });
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  }
};
</script>

<style lang="stylus">
.typed-cursor
  opacity: 1
  animation: blink 0.7s infinite

@keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
</style>

<style scoped lang="scss">
.home-banner {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 100vh;
  background-attachment: fixed;
  text-align: center;
  color: #fff !important;
  animation: header-effect 1s;
}

.banner-container {
  margin-top: 43vh;
  line-height: 1.5;
  color: #eee;
}

.blog-contact a {
  color: #fff !important;
}

.card-info-social {
  line-height: 40px;
  text-align: center;
  margin: 6px 0 -6px;
}

.card-info-social a {
  font-size: 1.5rem;
}

.left-radius {
  border-radius: 8px 0 0 8px !important;
  order: 0;
}

.right-radius {
  border-radius: 0 8px 8px 0 !important;
  order: 1;
}

.article-wrapper {
  font-size: 14px;
}

@media (min-width: 760px) {
  .blog-title {
    font-size: 2.5rem;
  }

  .blog-intro {
    font-size: 1.5rem;
  }

  .blog-contact {
    display: none;
  }

  .home-container {
    max-width: 1200px;
    margin: calc(100vh - 48px) auto 28px auto;
    padding: 0 5px;
  }

  .article-card {
    display: flex;
    align-items: center;
    height: 280px;
    width: 100%;
    margin-top: 20px;
  }

  .article-cover {
    overflow: hidden;
    height: 100%;
    width: 45%;
  }

  .on-hover {
    transition: all 0.6s;
  }

  .article-card:hover .on-hover {
    transform: scale(1.1);
  }

  .article-wrapper {
    padding: 0 2.5rem;
    width: 55%;
  }

  .article-wrapper a {
    font-size: 1.5rem;
    transition: all 0.3s;
  }
}

@media (max-width: 759px) {
  .blog-title {
    font-size: 26px;
  }

  .blog-contact {
    font-size: 1.25rem;
    line-height: 2;
  }

  .home-container {
    width: 100%;
    margin: calc(100vh - 66px) auto 0 auto;
  }

  .article-card {
    margin-top: 1rem;
  }

  .article-cover {
    border-radius: 8px 8px 0 0 !important;
    height: 230px !important;
    width: 100%;
  }

  .article-cover div {
    border-radius: 8px 8px 0 0 !important;
  }

  .article-wrapper {
    padding: 1.25rem 1.25rem 1.875rem;
  }

  .article-wrapper a {
    font-size: 1.25rem;
    transition: all 0.3s;
  }
}

.scroll-down {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.scroll-down i {
  font-size: 2rem;
}

.article-wrapper a:hover {
  color: #8e8cd8;
}

.article-info {
  font-size: 95%;
  color: #858585;
  line-height: 2;
  margin: 0.375rem 0;
}

.article-info a {
  font-size: 95%;
  color: #858585 !important;
}

.article-content {
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-wrapper {
  position: sticky;
  top: 10px;
}

.blog-card {
  line-height: 2;
  padding: 1.25rem 1.5rem;

  .web-info-title {
    svg {
      vertical-align: middle;
      margin-bottom: 3px;
    }
  }
}

.author-wrapper {
  text-align: center;
}

.blog-info-wrapper {
  display: flex;
  justify-self: center;
  padding: 0.875rem 0;
}

.blog-info-data {
  flex: 1;
  text-align: center;
}

.blog-info-data a {
  text-decoration: none;
}

.collection-btn {
  text-align: center;
  z-index: 1;
  font-size: 14px;
  position: relative;
  display: block;
  background-color: #49b1f5;
  color: #fff !important;
  height: 32px;
  line-height: 32px;
  transition-duration: 1s;
  transition-property: color;
}

.collection-btn:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #ff7242;
  content: "";
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  transition-property: transform;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.collection-btn:hover:before {
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  transform: scaleX(1);
}

.author-avatar {
  transition: all 0.5s;
}

.author-avatar:hover {
  transform: rotate(360deg);
}

.web-info {
  padding: 0.25rem;
  font-size: 0.875rem;
}

.scroll-down-effects {
  color: #eee !important;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  line-height: 1.5;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  animation: scroll-down-effect 1.5s infinite;
}

@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }

  50% {
    top: -16px;
    opacity: 1;
    filter: none;
  }

  100% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
}

.big i {
  color: #f00;
  animation: big 0.8s linear infinite;
}

@keyframes big {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.guanzhu {
  margin-top: 10px;
}

.guanzhu .qqGroup {
  background: url() no-repeat;
  background-size: 22px;
  background-position-y: 47%;
}

.guanzhu .qq {
  background: url() no-repeat 0 -98px;
}

.guanzhu .email {
  background: url() no-repeat 0 -150px;
}

.guanzhu .github {
  background: url(github-fill.png) no-repeat;
  background-size: 25px;
  background-position-y: 47%;
}

.guanzhu .gitee {
  background: url() no-repeat;
  background-size: 25px;
  background-position-y: 47%;
}

.guanzhu ul li {
  font-size: 12px;
  margin-bottom: 10px;
  background: #fff;
  color: #525252;
  line-height: 40px;
  padding: 0 0 0 34px;
  border-radius: 2px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  &::after {
    content: "";
    height: 2px;
    overflow: hidden;
    display: block;
    left: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    background: #49b1f5;
    transform: scaleX(0);
    transition: all 0.5s;
  }

  &:hover::after {
    transform: scaleX(1);
  }
}</style>
